﻿<div id="commentlist">
	<!-- comments START -->
	<ol id="thecomments">
		{% for comment in entry.comments %}
		<li class="comment regularcomment" id="comment-{{comment.key.id}}">
		<div class="author">
			<div class="pic">
				<img alt='' src='{{comment.gravatar_url}}' class='avatar avatar-32 photo' height='32' width='32' />			
			</div>
			<div class="name">
				{%if comment.weburl %}
				<a id="comment-{{comment.key.id}}" class="url" target="_blank" href="{{comment.weburl}}">{{comment.author}}</a>
				{% else %}{{comment.author}}{%endif%}
			</div>
		</div>

		<div class="info">
			<div class="date">{{comment.date|datetz:"Y-m-d"}} at {{comment.date|datetz:"H:i"}}
				<a onclick="return backcomment('{{comment.author}}');" href="#commentarea"><font color="#800000">回复</font></a> 
				<a onclick="return backcomment('引用{{comment.author}}<blockquote> {{comment.content}}</blockquote>');" href="#commentarea"><font color="#800000">引用</font></a> 
			</div>
			<div class="fixed"></div>
			<div class="content">
				<div id="comment-{{comment.key.id}}">{{comment.content}}</div>
			</div>
		</div>
		<div class="fixed"></div>
		</li>
		{% endfor %}
	</ol>
	<!-- comments END -->
</div>

<a name="commentarea"></a> <!--回复使用的锚-->
{% if entry.allow_comment %}
<form action="/post_comment" method="post" id="commentform">
	<div id="respond">
		<div id="author_info">
			<div class="row">
				<input type="text" name="author" id="author" class="textfield" value="" size="24" tabindex="1" />
				<label for="author" class="small">昵称 (必填)</label>
			</div>
			<div class="row">
				<input type="text" name="email" id="email" class="textfield" value="" size="24" tabindex="2" />
				<label for="email" class="small">电子邮箱 (我们会为您保密) (必填)</label>

			</div>
			<div class="row">
				<input type="text" name="url" id="url" class="textfield" value="" size="24" tabindex="3" />
				<label for="url" class="small">网址</label>
			</div>
			<div class="row">
				<input type="hidden" name="checknum" id="checknum" value="{{checknum1}}+{{checknum2}}" />

				<input type="text" name="checkret" id="checkret"  class="textfield" value="" size="24" tabindex="4" />
				<label for="url" class="small"><span id="disp_check">{{checknum1}}+{{checknum2}}麻烦，计算一下</span></label>
			</div>
		</div>

		<div class="row">
			<textarea name="comment" id="comment" style="width:96%"  rows="10" tabindex="5"></textarea>
		</div>


		<div id="s_msg" style="display:none;color:red">正在提交留言...</div>
		<div class="submitbutton">
			<input name="submit" type="submit" id="submit" class="button" tabindex="6" value="提交评论" />
		</div>
		<input type="hidden" name="key" value="{{entry.key}}" />
		<input type="hidden" name="useajax" value="1" />
	</div>
</form>

<script>
	loadjs=false;

	commentuser=$.cookie('comment_user');
	if (commentuser)
	{
		[user,email,url]=commentuser.split('#@#');
		$('#author').val(user);
		$('#email').val(email);
		$('#url').val(url);
		$('#checkarea').hide();
	}
	else
	{
		num1=Math.round(Math.random()*10);
		num2=Math.round(Math.random()*10);
		$('#checkarea #checknum').val(num1+'+'+num2);
		$('#checkarea #disp_check').text(num1+'+'+num2+'=');
		$('#checkarea').show();
	}

	function showinfo(msg)
	{
		alert(msg);
	}
	//回复自动输入姓名函数
	function backcomment(msg){
		backdb=document.getElementById('comment');
		backdb.value="@"+msg;
		return true;
	}
	//引用调用函数
	function quote(name,id){
		var quoteMsg=document.getElementById(id).innerHTML;
		document.getElementById("comment").value='引用'+name+'<blockquote>'+quoteMsg+'</blockquote>';
		return true;
	}
	function add_comment(msg)
	{
		comment=$(msg)
		if (!loadjs)
		{
			$("#thecomments").append(comment).show();
			$.getScript("/static/js/jquery.color.js", function(){
				comment.animate( { backgroundColor: '#fbc7c7' }, "slow")
				.animate( { backgroundColor: 'white' }, "slow")
				loadjs=true;
			});
		}else
		{
			$("#thecomments").append(comment);
			comment.animate( { backgroundColor: '#fbc7c7' }, "slow")
			.animate( { backgroundColor: 'white' }, "slow")

		}
	}

	$('#commentform').ajaxForm({
		type:'post',
		dataType:  'json',
		beforeSubmit:function(formData,jqForm,options){
			var form = jqForm[0];
			if (form.author)
			{

				if (!form.author.value)
				{
					showinfo('请输入你的名字!');
					form.author.focus();
					return false;
				}
				if (!form.email.value)
				{
					showinfo('请输入邮件地址');
					form.email.focus();
					return false;
				}
			}
			if ($('#checkarea').css('display')!='none')
			{
				if(eval(form.checknum.value)!=form.checkret.value)
				{
					alert('计算错误，这个算术好像在幼儿园学过的吧？');
					form.checkret.value='';
					form.checkret.focus();
					return false;
				}

			}

			if (!form.comment.value)
			{
				showinfo('请输入留言内容');
				form.comment.focus();
				return false;
			}

			$('#s_msg').text('正在提交留言...').show();

			return true;

		},
		success:function(data){
			if (data[0])
			{
				/*document.cookie=data[2];*/
				add_comment(data[1]);
				$('#s_msg').text('留言提交成功！');
				$('#comment').val('');
			}
			else
			{  if (data[1]==-102)
				showinfo('计算错误，回幼儿园进修一下再来过。');
				$('#s_msg').text('留言提交失败！');
				$('#checkret').focus();

			}
		}
	});
</script>
{% else %}
<p class="nocomments">评论已关闭</p>
{% endif %}

